<template>
	<scroll-view class="page-container" scroll-y @scrolltolower="scrollToLower">
		
		<view class="dataList padd30">
			<view class="list" v-if="dataList.length>0">
				<view class="item between" v-for="(item,index) in dataList" :key="index" @click="toPageLinketails(item)">
					<image :src="imagesUrl + item.spare" class="hImg" mode="aspectFill"></image>
					<view class="info">
						<view class="name ellipsis">{{item.name}}</view>
						<view class="txt ellipsis">{{item.type}}</view>
						<view class="txt ellipsisMore line2">{{item.address}}</view>
						<view class="pirce">
							<view class="num"><text>¥</text>{{item.price}}<text></text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<view class="txt">没有更多数据～～</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();

	const imagesUrl = proxy.$imagesUrl;//图片路径
	
	const dataList = ref([])
	
	const houseName = ref('');
	
	const page = ref(1) //分页
	const limit = ref(10) //数量
	
	function resetPage() {
		page.value = 1
	}
	
	function handleEnterKey() {
		dataList.value = []
		resetPage()
	    getHouse()
	}
	
	let lastScrollTime = 0; // 上次滚动时间	
	function scrollToLower(){
		const now = Date.now();
		// 如果距离上次滚动时间不足一秒，则直接返回
		if (now - lastScrollTime < 1000) {
			return;
		}
		// 更新上次滚动时间
		lastScrollTime = now;
		page.value++
		getHouse()
	}
	
	//获取 房源列表
	function getHouse(){
		const userData = uni.getStorageSync('USERDATA');
		proxy.$request({
			url: `${proxy.$api.getCollection}`,
			method: "POST",
			data:{
				page:page.value,
				limit:limit.value ,
				user_id:userData.id
			}
		}).then(res => {
			dataList.value = dataList.value.concat(res.data);
		})
	}
	
	function toPageLinketails(val){//跳转详细
		uni.navigateTo({
			url:'/pages/houseDetails/index?id=' + val.id
		})
	}
	
	onLoad((e) => {
		getHouse()
	})
	
	onShow(() => {
	
	})
</script>

<style lang="less" scoped>
	.page-container {
		// padding-top: 158rpx;
		height: 100vh;
	}

	.fiexd-top {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		.search{
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 96rpx;
			border:2rpx solid #f8f8f8;
			.icon{
				width: 32rpx;
				height: 32rpx;
			}
			.hr{
				width: 2rpx;
				height: 68rpx;
				margin: 0 19rpx;
				background-color: #f8f8f8;
			}
			.s-input{
				flex: 1;
				font-size: 26rpx;
				color: #333;
			}
		}
	}
	.dataList{
		background-color: #fff;
		.list{
			.item{
				padding: 15rpx;
				border-radius: 8rpx;
				box-shadow: 0px 0px 8px 0px rgba(55, 123, 245, 0.08);
				margin-bottom: 30rpx;
				.hImg{
					width: 208rpx;
					height: 208rpx;
					display: block;
					border-radius: 8rpx;
				}
				.info{
					flex: 1;
					padding-left: 15rpx;
					overflow: hidden;
					.name{
						font-size: 30rpx;
					}
					.txt{
						color: #747474;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
					.ellipsisMore{
						min-height: 70rpx;
					}
					.line2{
						-webkit-line-clamp:2;
					}
					.pirce{
						display: flex;
						align-items: center;
						font-size: 26rpx;
						.num{
							font-size: 32rpx;
							color: #ff6666;
							margin: 0 10rpx;
							text{
								color: black;
							}
						}
					}
				}
			}
		}
	}
</style>